<template>
  <v-container>
    <v-layout row wrap>
      <v-flex md3 v-for="item in 10" :key="item" my-2>
        <v-card @click.native="routeGo(product)">
          <div class="grey sd-image-loading-wrapper">
            <img width="100%" :src="img" alt />
          </div>
          <v-card-title primary-title>
            <div>
              <h5>title</h5>
              <p>SKU#</p>
            </div>
          </v-card-title>
          <div>
            <v-layout row>
              <v-flex xs12 ma-3>
                <v-btn block small outline color="teal darken-3" >MORE DETAIL</v-btn>
              </v-flex>
            </v-layout>
          </div>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      val: 0,
      setting: {
        dots: "outside",
        trigger: "hover"
      },
      img: "https://sdw-storage-north-america-qiniu.9peak.net/qiniu-image-1539338872.jpeg",
      product: {
        id: 10
      }
    };
  },
  methods: {
    routeGo(product) {
      // console.log(product)
      this.$router.push({ name: "ProductDetil", query: { id: product.id } });
    }
  }
};
</script>